<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.8.3.js"></script>
    <style>
        #content {
            width: 300px;
            height: 300px;
            border: 1px solid blue;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div>
        <!-- hide 隐藏 -->
        <button id="hide_id">Hide</button>
        <!-- show 显示 -->
        <button id="show_id">Show</button>
        <!-- toggle 切换隐藏和显示的效果 -->
        <button id="toggle_id">Toggle</button>
        <!-- slideUp 向上滑动 -->
        <button id="slide_up_id">SlideUp</button>
        <!-- slideDown 向下滑动 -->
        <button id="slide_down_id">SlideDown</button>
        <!-- slideToggle 切换向上和向下滑动效果 -->
        <button id="slide_toggle_id">SlideToggle</button>
        <!-- fadeOut 淡出 -->
        <button id="fade_out_id">FadeOut</button>
        <!-- fadeIn 淡入 -->
        <button id="fade_in_id">FadeIn</button>
        <!-- fadeToggle 切换淡出淡入效果 -->
        <button id="fade_toggle_id">FadeToggle</button>
        <!-- fadeTo 透明度变化 -->
        <button id="fade_to_id">FadeTo</button>
        <!-- animate 动画效果，可以修改CSS属性 -->
        <button id="animate_id">Aimate</button>

    </div>
    <br>
    <br>
    <div id="content">
        我的室友都睡觉了，我把他们手机偷偷拿过来关掉闹钟，明天一早我一个人起床上课，卷死他们！！！
    </div>
    <script>
        $(document).ready(function() {
            $("#hide_id").click(function() {
                // $("#content").hide();
                // $("#content").hide("slow");
                $("#content").hide(1000);
            });

            $("#show_id").click(function() {
                $("#content").show("slow");
            });

            $("#toggle_id").click(function() {
                $("#content").toggle(2000);
            });


            $("#slide_up_id").click(function() {
                $("#content").slideUp();
            });

            $("#slide_down_id").click(function() {
                $("#content").slideDown();
            });

            for (var i = 0; i < 10; i++) {
                $("#slide_toggle_id").click(function() {
                    $("#content").slideToggle(2000);
                });
            }


            $("#fade_out_id").click(function() {
                $("#content").fadeOut();
            });

            $("#fade_in_id").click(function() {
                $("#content").fadeIn();
            });

            $("#fade_toggle_id").click(function() {
                $("#content").fadeToggle(2000);
            });

            $("#fade_to_id").click(function() {
                $("#content").fadeTo(2000, 0.5);
            });

            $("#animate_id").click(function() {
                $("#content").animate({
                    width: "500px",
                    height: "500px"
                });


            });


        });
    </script>

</body>

</html>